<template>
	<div class="go-sketch-rule">
		<SketchRule
			v-if="sketchRuleReDraw"
			:thick="thick"
			:scale="scale"
			:width="wSize.width"
			:height="wSize.height"
			:startX="startX"
			:startY="startY"
			:lines="lines"
			:palette="paletteStyle"
		>
		</SketchRule>
		<div ref="screensRef" class="edit-screens" @scroll="handleScroll">
			<div ref="container" class="edit-screen-container" :style="{ width: wSize.width  * 2 + 'px' }">
				<div
					ref="refSketchRuleBox"
					class="canvas"
					@mousedown="dragCanvas"
					:style="{ marginLeft: '-' + (wSize.width / 2 - 25) + 'px' }">
					<div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
						<slot></slot>
					</div>
				</div>
			</div>
		</div>
		<!-- 修复右下角白点用的 -->
		<div v-if="darkTheme" class="fix-edit-screens-block"></div>
	</div>
</template>
<script>
import SketchRule from "vue3-sketch-ruler";

export default {
	components: {
		SketchRule
	},
	data() {
		return {
			sketchRuleReDraw: true,
			isShowRuler: true, // 显示标尺
			isShowReferLine: true, // 显示参考线
			wSize: {height: 0, width: 0},
			isPressSpace: false,
			thick: 20,
			scale: 2,
			startX: 0,
			startY: 0,
			lines: {h: [], v: []},
			prevMoveXValue: [0, 0],
			prevMoveYValue: [0, 0],
			darkTheme:true,
			paletteStyle: {
				bgColor: '#f5f5f5',
				longfgColor: '#4d4d4d',
				shortfgColor: '#4d4d4d',
				fontColor: '#4d4d4d',
				shadowColor: '#18181c',
				borderColor: '#18181c',
				cornerActiveColor: '#18181c'
			}
		}
	},
	watch: {
		scale(value) {
			this.canvasPosCenter();
		}
	},
	mounted() {
		if (this.$refs.screensRef) {
			this.$refs.screensRef.addEventListener('wheel', this.handleWheel, { passive: false })
			this.canvasPosCenter()
		}
		this.$nextTick(() => {
			this.canvasBox();
		});
		window.addEventListener('mousemove', (e)=>{
			let newStartX = e.pageX
			let newStartY = e.pageY
			let nx = e.pageX - newStartX;
			let ny = e.pageY - newStartY;
			const [prevMoveX1, prevMoveX2] = this.prevMoveXValue;
			const [prevMoveY1, prevMoveY2] = this.prevMoveYValue;
			this.prevMoveXValue = [prevMoveX2, nx]
			this.prevMoveYValue = [prevMoveY2, ny]
			this.$refs.screensRef.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
			this.$refs.screensRef.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
		})
	},
	methods: {
		handleWheel(e){
			if (e.ctrlKey || e.metaKey) {
				e.preventDefault()
				let resScale = this.scale
				// 放大(200%)
				if (e.wheelDelta >= 0 && this.scale < 2) {
					resScale = this.scale + 0.05
					return
				}
				// 缩小(10%)
				if (e.wheelDelta < 0 && this.scale > 0.1) {
					resScale = this.scale - 0.05
				}
			}
		},
		canvasPosCenter() {
			let containerWidth = this.$refs.container.getBoundingClientRect().width;
			let containerHeight = this.$refs.container.getBoundingClientRect().height;
			this.canvasBox()
			this.$refs.screensRef.scrollLeft = containerWidth / 2 - this.wSize.width / 2
			this.$refs.screensRef.scrollTop = containerHeight / 2 - this.wSize.height / 2
		},
		containerWidth() {
			return `${this.height * 2}px`
		},
		handleScroll() {
			if (!this.$refs.screensRef) return;
			const screensRect = this.$refs.screensRef.getBoundingClientRect()
			const canvasRect = this.$refs.screensRef.getBoundingClientRect()
			this.startX = (screensRect.left + this.thick - canvasRect.left) / this.scale
			this.startY = (screensRect.top + this.thick - canvasRect.top) / this.scale
		},
		async canvasBox() {
			let layoutDom = document.getElementById('go-chart-edit-layout')
			if (layoutDom) {
				this.wSize.height = layoutDom.clientHeight - 20;
				this.wSize.width = layoutDom.clientWidth - 20;
			}
		},
		dragCanvas(e) {
			e.preventDefault()
			e.stopPropagation()
			if (e.which == 2) {
				this.isPressSpace = true
			}
			else if (!window.$KeyboardActive?.space) return
			let newStartX = e.pageX
			let newStartY = e.pageY
			let that = this;
			window.addEventListener('mousemove', ()=>{
				let nx = e.pageX - newStartX;
				let ny = e.pageY - newStartY;
				const [prevMoveX1, prevMoveX2] = that.prevMoveXValue;
				const [prevMoveY1, prevMoveY2] = that.prevMoveYValue;
				that.prevMoveXValue = [prevMoveX2, nx]
				that.prevMoveYValue = [prevMoveY2, ny]
				let screensRef = ref();
				screensRef.value.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
				screensRef.value.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
			})
			window.addEventListener('mouseup',()=>{
				/*listenMousemove()
				listenMouseup();*/
				that.prevMoveXValue = [0, 0]
				that.prevMoveYValue = [0, 0]
				that.isPressSpace.value = false
			})
		}
	}
}
</script>
<style>
#mb-ruler {
	top: 0;
	left: 0;
}

/* 横线 */
#mb-ruler .v-container .lines .line {
	/* 最大缩放 200% */
	width: 200vw !important;
	border-top: 1px dashed v-bind('themeColor') !important;
}

#mb-ruler .v-container .indicator {
	border-bottom: 1px dashed v-bind('themeColor') !important;
}

/* 竖线 */
#mb-ruler .h-container .lines .line {
	/* 最大缩放 200% */
	height: 200vh !important;
	border-left: 1px dashed v-bind('themeColor') !important;
}

#mb-ruler .h-container .indicator {
	border-left: 1px dashed v-bind('themeColor') !important;
}

/* 坐标数值背景颜色 */
#mb-ruler .indicator .value {
	background-color: rgba(0, 0, 0, 0);
}

/* 删除按钮 */
#mb-ruler .line .del {
	padding: 0;
	color: v-bind('themeColor');
	font-size: 26px;
	font-weight: bolder;
}

#mb-ruler .corner {
	border-width: 0 !important;
}
@include go('sketch-rule') {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;

	.edit-screens {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: auto;
		user-select: none;
		padding-bottom: 0px;

		/* firefox */
		scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
		scrollbar-width: thin;

		/* chrome */
		&::-webkit-scrollbar,
		&::-webkit-scrollbar-track-piece {
			background-color: transparent;
		}

		&::-webkit-scrollbar {
			width: 7px;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 5px;
			background-color: rgba(144, 146, 152, 0.3);
		}
	}

	.fix-edit-screens-block {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 10px;
		height: 10px;
		background-color: $--color-dark-bg-1;
	}

	.edit-screen-container {
		position: absolute;
		height: v-bind('containerWidth');
		top: 0;
		left: 0;
	}
	.canvas {
		position: absolute;
		top: 50%;
		left: 50%;
		transform-origin: 50% 0;
		transform: translateY(-50%);
		&:hover {
			cursor: v-bind('cursorStyle');
		}
		&:active {
			cursor: crosshair;
		}
	}
}
</style>
